<template>
<div class="mtop">
  <div class="hello">
    <div class="tab">
      <img :src="imgsrc" alt="">
    </div>
    <div class="tejia">
      <div class="left">
        <a href="">
          <p class="colored">{{baoy}}</p>
          <p class="cente">{{bai}}</p>
          <p class="colofff">{{te}}</p>
          <img :src="tkh" alt="">
        </a>
      </div>
      <div class="right">
        <div class="tops clearfix">
          <p><span>{{you}}</span></p><br/>
          <p>{{diye}}</p>
          <img :src="hzp" alt="">
        </div>
        <div class="bott">
          <div class="borr">
            <p>{{pai}}</p>
            <span>{{re}}&nbsp;&nbsp;{{bao}}</span><br/>
            <img :src="kh" alt="">
          </div>
          <div class="borr">
            <p>{{qian}}</p>
            <span>{{jifen}}</span><br/>
            <img :src="hb" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="jieshao">
      <div class="jienav"><p>全网最热优惠券</p>距更新02时16分48秒</div>
      <dl>
        <dt><img :src="yf" alt=""></dt>
        <dd>
          <p>{{han}}</p>
        </dd>
      </dl>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      imgsrc: require('../../static/imgs/header.png'),
      baoy: '9块9包邮',
      bai: '每日白菜价',
      te: '天天特价',
      tkh: require('../../static/imgs/tkh.png'),
      hzp: require('../../static/imgs/hzp.png'),
      you: '品牌优选',
      diye: 'ambxs遮瑕粉底液￥',
      pai: '排行榜',
      re: '热卖',
      bao: '爆款',
      qian: '签到有礼',
      jifen: '积分抽红包',
      kh: '../../static/imgs/kh.png',
      hb: '../../static/imgs/hb.png',
      yf: '../../static/imgs/yf.png',
      han: '韩版紧身加绒铅笔小脚打底裤'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mtop{
  margin-top: 50px;
}
.hello .tab{
  width:90%;
  margin: 50px auto;
}
.hello .tab img{
  width:100%;
}
.tejia{
  display:flex;
  width:90%;
  margin: 5% auto;
}
.tejia .left{
  width:50%;
  border-right: 1px solid #ccc;
}
.tejia .left img{
  width:80%;
  margin-left:15%;
  padding-top: 10%;
}
.tejia .left .colored{
  color:red;
}
.tejia .left .colofff{
  color:#fff;
  background:#00a0e9;
  padding:10px;
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
}
.tejia .left .cente{
  font-size: 12px;
}
.tejia .right .tops{
  justify-content: space-between;
  border-bottom:1px solid #ccc;
}
.tejia .right .tops p span{
  font-size:14px;
  color:red;
}
.tejia .right .tops img{
  width:45%;
  float: right;
  margin-top:-10%;
}
.tejia .right .tops p{
  font-size:12px;
  float: left;
}
.tejia .right p{
  margin-left:3%;
}
.tejia .left p{
  margin-right: 10%;
  margin-top:10%;
}
img{
  display:block;
}
.tejia .right .bott{
  display:flex;
}
.tejia .right .bott div{
  width:50%;
}
.tejia .right .bott .borr{
  border-right:1px solid #ccc;
}
.tejia .right .bott .borr img{
  margin-top:20%;
  margin-left:50%;
  width:50%;
}
.tejia .right .bott .borr p{
  font-size:17px;
  color:#dfa71a;
  margin:5% 0 5% -25%;
}
.tejia .right .bott .borr{
  font-size:12px;
}
.tejia .right .bott .borr span{
  margin-left:-25%;
}
.jieshao .jienav{
  display:flex;
}
.jieshao .jienav p{
  background: #00a0e9;
  padding: 1% 7% 1% 3%;
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
}
</style>
